<template>
  <div class="number-manger">
    <!-- 只需要负责数量的控制，而不需要管其它东西 -->
    <span @click.stop="onLessClick">-</span>
    <input type="number"
           disabled
           v-model="number">
    <span @click.stop="onAddClick">+</span>
  </div>
</template>
<script>
export default {
  props: {
    defaultNumber: {
      type: Number,
      default: 1
    }
  },

  //
  data () {
    return {
      number: 1
    }
  },
  watch: {
    defaultNumber (val) {
      this.number = val
    },
    // 当number数量发生改变要通知父组件
    number (val) {
      this.$emit('onChangeNumber', val)
    }
  },
  methods: {
    onLessClick () {
      if (this.number > 1) {
        this.number--
      }
    },
    onAddClick () {
      this.number++
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
@import "@css/variable.scss";
.number-manger {
  height: px2rem(20);
  line-height: px2rem(20);
  display: flex;
  font-size: px2rem($infoSize);
  width: px2rem(120);
  span {
    width: px2rem(30);
    text-align: center;
    font-weight: 500;
    flex-shrink: 0;
  }
  input {
    background: $bgColor;
    padding: 0 px2rem(4);
    width: 100%;
    text-align: center;
    border: px2rem(1) solid $lineColor;
    margin: 0 px2rem(10);
  }
}
</style>